import React from 'react'
import Flatpickr from "react-flatpickr";
import {unixTime} from "../../../helpers/utils";
import {Russian} from "flatpickr/dist/l10n/ru";
import {SET_RELEASE_FILTER_CHECKED} from "../../../redux/constants/releases";
import {Calendar} from "react-feather";
import {FormGroup} from "reactstrap";

class ReleaseFlatpickr extends React.PureComponent {
  handleOnChange = () => {
    this.flatpickrRef.flatpickr.toggle()
  }

  render() {
    const {minDate, maxDate, setDate, setFieldData, placeholder, value, type} = this.props
    const options = {
      dateFormat: "d-m-Y",
      locale: Russian,
      maxDate: maxDate,
      minDate: minDate,
      disableMobile: "true"
    }

    return (
      <div className="releases__filter-date-item releases__filter-header-item">
        <FormGroup className="position-relative">
          <Flatpickr
            ref={el => this.flatpickrRef = el }
            className="form-control text-center"
            placeholder={placeholder}
            value={value}
            options={options}
            onChange={date => {
              setDate(date)
              setFieldData(SET_RELEASE_FILTER_CHECKED, type, unixTime(date))
            }}
          />
          <div className="form-control-position" onClick={this.handleOnChange}>
            <Calendar size={18} />
          </div>
        </FormGroup>
      </div>
    )

  }
}

export default ReleaseFlatpickr
